<template>
  <view>
    <Search />

    <Tabs :tabsData="tabsData" @getIndex="getTabsIndex" />

    <!-- 商品列表 -->
    <GoodsItem 
    v-for="(item,index) in goods"
    :key="index"
    :item="item"
     />

    <view
        class="tips"
        v-if="hasMore === false"
      >
      我也是有底线的
      </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index.vue";
import GoodsItem from "@/components/GoodsItem/index.vue";
import Tabs from "@/components/Tabs/index.vue";
import {goodsListSearch, homeSwiper} from '@/api/index.js'

export default {
  components: {
    Search,
    Tabs,
    GoodsItem
  },
  data() {
    return {
      cid: "",
      pagenum: 1,
      pagesize: 10,
      goods: [],
      hasMore: true, // 是否还有更多数据
      tabsData: [
        { id: 1, text: "综合" },
        { id: 2, text: "销量" },
        { id: 3, text: "价格" },
      ],
    };
  },
  onLoad({ cid }) {
    // console.log(cid);
    this.cid = cid || 927;
    this.getDataList();
  },
   // 这个事件的名称是小程序官方规定的，不能乱写，用于捕获用户触底事件的
  onReachBottom() {
    if(this.hasMore === true){
      this.pagenum += 1;
      // 重新发送请求
      this.getDataList();
    }
  },

  async onPullDownRefresh() {
    // 重新初始化请求参数
    this.pagenum = 1;
    this.goods = [];
    this.hasMore = true;
    // 根据新的参数重新发送一次请求
    await this.getDataList();
    // 等上面完成数据重新加载后再隐藏下拉栏
    uni.stopPullDownRefresh();
  },
  methods: {
    async getDataList() {
      // 调用 loading 提示
      uni.showLoading({ title: "疯狂加载中..." });
      const res = await goodsListSearch({
        cid:this.cid,
        pagenum:this.pagenum,
        pagesize:this.pagesize
      })
      // console.log(res.data.message);
      const { goods,total } = res.data.message;

      this.goods = [...this.goods, ...goods];

      // 请求结束立刻隐藏 loading 提示
      uni.hideLoading();
      if(total === this.goods.length){
        this.hasMore = false;
      }
      
    },
    getTabsIndex(index){
      console.log('传递过来的索引',index);
    }
  },
};
</script>

<style lang="less" scoped>
.tips {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>